<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>登录</title>
<%--    <link rel="icon" href="${pageContext.request.contextPath}/favicon.ico" type="image/ico">--%>
    <meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
    <meta name="description" content="Light Year Admin V4是一个后台管理系统的HTML模板，基于Bootstrap v4.4.1。">
    <meta name="author" content="yinqi">
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/icons.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/style.min.css" rel="stylesheet">
    <style>
        .login-form .has-feedback {
            position: relative;
        }
        .login-form .has-feedback .form-control {
            padding-left: 36px;
        }
        .login-form .has-feedback .mdi {
            position: absolute;
            top: 0;
            left: 0;
            right: auto;
            width: 36px;
            height: 36px;
            line-height: 36px;
            z-index: 4;
            color: #dcdcdc;
            display: block;
            text-align: center;
            pointer-events: none;
        }
        .login-form .has-feedback.row .mdi {
            left: 15px;
        }
    </style>
</head>

<body class="center-vh" style="background-image: url(${pageContext.request.contextPath}/images/login-bg-2.jpg); background-size: cover;">
<div class="card card-shadowed p-5 w-420 mb-0 mr-2 ml-2">
    <div class="text-center mb-3">
        <h2>欢 迎 登 录</h2>
    </div>

    <form method="post" class="login-form">
        <div class="form-group has-feedback">
            <span class="mdi mdi-account" aria-hidden="true"></span>
            <input type="text" class="form-control" id="username" placeholder="用户名">
        </div>

        <div class="form-group has-feedback">
            <span class="mdi mdi-lock" aria-hidden="true"></span>
            <input type="password" class="form-control" id="password" placeholder="密码">
        </div>

        <div class="form-group">
            <button class="btn btn-block btn-primary" type="button" id="btnLogin">立即登录</button>
        </div>
    </form>

</div>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/lightyear.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#btnLogin').click(function () {
            var username = $('#username').val()
            var password = $('#password').val()

            $.post("${pageContext.request.contextPath}/login", {
                userName: username,
                password: password
            }, function (resp) {
                console.log(resp);
                if (resp.code === 200) {
                    lightyear.notify(resp.msg, 'success', 5000, 'mdi mdi-emoticon-happy', 'top', 'center');
                    location.href = "${pageContext.request.contextPath}/admin/index"
                }else {
                    lightyear.notify(resp.msg, 'danger', 5000, 'mdi mdi-emoticon-happy', 'top', 'center');
                }
            })
        })
    })
</script>
</body>
</html>